<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	   <form action="" method="">
	   	    <table border="" cellspacing="" cellpadding="">
	   	    	<tr>
					<th></th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>家庭状况</th>
				</tr>
				<tr>
					<th><input type="checkbox" /></th>
					<th>张三</th>
					<th>女</th>
					<th>18</th>
					<th>xxxx</th>
				</tr>
				<tr>
					<th><input type="checkbox"  /></th>
					<th>李四</th>
					<th>男</th>
					<th>19</th>
					<th>xxxx</th>
				</tr>
				<tr>
					<th><input type="checkbox"  /></th>
					<th>王伟</th>
					<th>男</th>
					<th>18</th>
					<th>xxxx</th>
				</tr>
				<tr>
					<th><input type="checkbox"  /></th>
					<th>山炮</th>
					<th>女</th>
					<th>19</th>
					<th>xxxx</th>
				</tr>
				<tr>
					<th><input type="checkbox"  /></th>
					<th>山炮1</th>
					<th>女</th>
					<th>19</th>
					<th>xxxx</th>
				</tr>
	   	    </table>
			<input type="checkbox" id="alls" onclick="allss()"/><button >全选</button><br>
	        <input type="checkbox" id="nan" onclick="man()"><button>只选男</button><br>
	        <input type="checkbox" id="women" onclick="womens()"><button>只选女</button><br>
	   </form>
	</body>
	<script type="text/javascript">
		function allss(){
		        var table= document.getElementsByTagName('table')[0];
		        var input=table.getElementsByTagName('input');
		        var all=document.getElementById('alls');
		        var arr=[].slice.call(input);
		        arr.forEach(element => {
		            element.checked=all.checked;
		        });
		    }
		    var nan=document.getElementById('nan');
			function man(){
				var table=document.getElementsByTagName('table')[0];
				var tr=table.getElementsByTagName('tr');
				for (var i = 1; i < tr.length; i++) {
					var td=tr[i].getElementsByTagName('td')[2];
					if(td.innerText== '男' ){
						tr[i].getElementsByTagName('td')[0].getElementsByTagName('input')[0].checked=nan.checked;
					}
				}
			}
			var women=document.getElementById('women');
			function womens(){
			        var table= document.getElementsByTagName('table')[0];
			        var tr=table.getElementsByTagName('tr');
			     
			        for(var i=1;i<tr.length;i++){
			            var td=tr[i].getElementsByTagName('td')[2];
			            if(td.innerText== '女' ){
			                console.log(111);
			                tr[i].getElementsByTagName('td')[0].getElementsByTagName('input')[0].checked=women.checked;
			            }
			        }
			    }
	</script>
</html>
